<template>
  <!-- 详情界面上面返回部分 -->
    <van-nav-bar
  title="商品详情"
  left-text="返回"
  left-arrow
  class="nav"
  @click-left="onClickLeft"
/>
<div class="bigbox">
  <img  class="tp1" :src="channel.commoditydata[id-1].img" alt="cw">
</div>
<div class="wz1">{{ channel.commoditydata[id-1].name }}</div>
<div class="wz2">￥{{ channel.commoditydata[id-1].price }}</div>
<div class="wz3">运费：免运费</div>
<div class="wz4">剩余库存：{{ channel.commoditydata[id-1].price }}</div>



<!-- 底部购买栏 -->
<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" @click="kf" />
  <van-action-bar-icon icon="cart-o" text="购物车" @click="addcar" />
  <van-action-bar-icon icon="shop-o" text="店铺" @click="dp" />
  <van-action-bar-button type="danger" text="立即购买" @click="buy" />
</van-action-bar>



</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
 import { useCounterStore } from '../../stores/counter'
 import { showSuccessToast, showFailToast } from 'vant';
 import { showConfirmDialog } from 'vant';

const router = useRouter()
const route = useRoute()
const channel = useCounterStore()
const id =  route.query.id
console.log(id);

//返回
const onClickLeft =() =>{
    router.push('/')
}
const addcar = () =>{

    showConfirmDialog({
  title: '添加购物车提醒',
  message:
    '您确定要添加此商品到购物车中吗？',
})
// 添加数据到购物车中
  .then(() => {
   if(channel.setIsLogin === true){
    channel.cardata.push({
        id:channel.cardata.length + 2,
        price:channel.commoditydata[id-1].price,
        name:channel.commoditydata[id-1].name,
        img:channel.commoditydata[id-1].img,
        origin:channel.commoditydata[id-1].origin,
        desc:channel.commoditydata[id-1].desc,
        count:channel.commoditydata[id-1].count,
        detailed:channel.commoditydata[id-1].detailed,
        mark:channel.commoditydata[id-1].mark,
        inventory:channel.commoditydata[id-1].inventory,
    })
    showSuccessToast('添加到购物车成功！');
    console.log(channel.cardata);
   }else{
    showFailToast('请先登录!');
   }
  })
  .catch(() => {
    // on cancel
  });

}

const dp =()=>{
  alert("店铺暂未开放！尽请期待！")
}


// 购物商品
const buy=()=>{
    if(channel.setIsLogin === true){
        showConfirmDialog({
  title: '购买',
  message:
    `确定花费${channel.commoditydata[id-1].price}元购买商品吗？`,
})
  .then(() => {
    channel.userdata[channel.loginid].consume =  channel.userdata[channel.loginid].consume - channel.commoditydata[id-1].price
    showSuccessToast('购买成功！');
  })
  .catch(() => {
    // on cancel
  });



    }else{
        showFailToast('请先登录!');
    }
}


const kf=()=>{
  router.push('/chat?id=2')
}
</script>

<style scoped>
/* 导航栏美化 */
.nav {
    background: linear-gradient(135deg, #8BC34A 0%, #4CAF50 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.nav :deep(.van-nav-bar__title) {
    color: white;
    font-weight: 500;
    font-size: 18px;
}

.nav :deep(.van-nav-bar__text),
.nav :deep(.van-icon-arrow-left:before) {
    color: rgba(255,255,255,0.9) !important;
}

/* 商品主图容器 */
.bigbox {
    width: 100%;
    height: 380px;
    padding: 15px;
    background: linear-gradient(180deg, #f8fff8 0%, #f0f9f0 100%);
    position: relative;
    overflow: hidden;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 商品图片 */
.tp1 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s;
    border-radius: 20px;
}

.tp1:hover {
    transform: scale(1.02);
}

/* 商品信息排版 */
.wz1 {
    color: #333;
    font-size: 20px;
    font-weight: 600;
    padding: 20px 25px 10px;
    line-height: 1.4;
    text-align: left;
    position: relative;
}

.wz1::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 25px;
    right: 25px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ddd 50%, transparent 100%);
}

.wz2 {
    color: #e4393c;
    font-size: 28px;
    font-weight: 700;
    padding: 15px 25px;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
}

.wz2::before {
    content: "¥";
    font-size: 0.8em;
    margin-right: 3px;
}

.wz3, .wz4 {
    font-size: 14px;
    color: #666;
    padding: 8px 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wz3::before {
    content: "🚚";
    font-size: 16px;
}

.wz4::before {
    content: "📦";
    font-size: 16px;
}

/* 底部操作栏美化 */
:deep(.van-action-bar) {
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
    padding: 8px 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(5px);
}

:deep(.van-action-bar-button) {
    border-radius: 25px;
    height: 45px;
    font-weight: 500;
    background: linear-gradient(135deg, #FF5722 0%, #F44336 100%);
    box-shadow: 0 3px 8px rgba(244,67,54,0.2);
    border: none;
}

:deep(.van-action-bar-icon) {
    color: #666;
    transition: all 0.3s;
}

:deep(.van-action-bar-icon:hover) {
    color: #4CAF50;
    transform: translateY(-3px);
}

:deep(.van-action-bar-icon__text) {
    font-size: 12px;
    margin-top: 4px;
}
</style>